<div class="post-list-container">

    <mat-card>
        <!--div *ngIf="user | async as user; else loading"-->
        <div *ngIf="postList; else loading">
            <div class="post-item-container" *ngFor="let post of postList">
                <h4>
                    <a target="_blank" href="{{postUrl + post.id}}" (click)="updateReadCount(post)">{{post.title}}</a>
                </h4>

                <div *ngIf="!post.toggle_expand" style="padding-bottom: 10px">
                    <div style="text-indent: 1.5em;line-height: 150%;display: inline;" [innerHTML]="post.excerpt">
                    </div>
                    <button class="more_link" (click)="toggleExpand(post)">显示全部</button>
                </div>

                <div *ngIf="post.toggle_expand">
                    <div [innerHTML]="post.content | keepHtml"></div>
                </div>

                <div>
                    <span class="info first">{{post.nickName }}</span>
                    <span class="info">{{post.createTime | customDate}}</span>
                    <span class="info">浏览:{{post.readCount || 0}}</span>
                    <span class="info">评论:{{post.commentCount || 0}}</span>
                    <button *ngIf="post.toggle_expand" class="item-collapse" (click)="post.toggle_expand = false">
                        收起
                    </button>
                </div>
            </div>

            <mat-paginator [length]="totalItems"
                           [pageSize]="pageSize"
                           (page)="pageChanged($event)">
            </mat-paginator>
        </div>
        <ng-template #loading>加载中……</ng-template>

    </mat-card>

</div>
